<template>
  <uv-tabbar fixed :value="value" activeColor="#F6A737" @change="change">
    <uv-tabbar-item v-for="item in list" :key="item.pagePath" :text="item.text">
      <template #active-icon>
        <image :src="item.selectedIconPath" class="w-[40rpx] h-[40rpx]"></image>
      </template>
      <template #inactive-icon>
        <image :src="item.iconPath" class="w-[40rpx] h-[40rpx]"></image>
      </template>
    </uv-tabbar-item>
  </uv-tabbar>
</template>

<script setup>
import { computed } from "vue"

uni.hideTabBar()

defineProps({
  value: {
    type: Number,
    default: 0
  }
})

const change = (index) => {
  if (index === 1) {
    return uni.navigateTo({
      url: "/pages/map/map"
    })
  }
  uni.switchTab({
    url: list.value[index].pagePath
  })
}
const list = computed(() => [
  {
    iconPath: "../../static/tabBar/find.png",
    selectedIconPath: "../../static/tabBar/findSelect.png",
    icon: "home",
    text: "首页",
    pagePath: "/pages/index/index"
  },
  {
    iconPath: "../../static/tabBar/studyAbroad.png",
    selectedIconPath: "../../static/tabBar/studyAbroadSelect.png",
    icon: "photo",
    text: "地图",
    pagePath: "/pages/study/study"
  },
  {
    iconPath: "../../static/tabBar/mine.png",
    selectedIconPath: "../../static/tabBar/mineSelect.png",
    icon: "account",
    text: "我的",
    pagePath: "/pages/personal/personal"
  }
])
</script>

<style lang="scss" scoped></style>
